<!-- 关联字体高亮 -->
<template>
	<rich-text :nodes="html"></rich-text>
</template>
 
<script>
	export default {
		props: {
			content: {	// 需要高亮的内容
				type: String,
				default: ''
			},
			keys: {	// 高亮的关键字，多个用 | 隔开
				type: String,
				default: ''
			},
			color: {	// 高亮颜色
				type: String,
				default: '#FD463E'
			},
			weight: {	// 是否加粗
				type: Boolean,
				default: false
			}
		},
		computed: {
			html() {
				if (this.keys === '') {
					return this.content;
				}
				var reg = new RegExp((`(${this.keys})`), "gm");
				var color = this.color || '#FD463E';
				var weight = this.weight ? 'bold' : 'normal';
				var replace = '<span style="color:' + color + ';font-weight: ' + weight + ';">$1</span>';
				return this.content.replace(reg, replace);
			}
		},
	}
</script>
 
<style>
</style>